import type { Directive, DirectiveBinding } from "vue";
import { usePermissionStore } from "@/stores/permission";

/**
 * 按钮权限指令
 * @description 根据用户的权限列表，控制元素的显示/隐藏
 * @example v-perm="'sys:user:add'" 单个权限
 * @example v-perm="['sys:user:add', 'sys:user:edit']" 多个权限（满足其中一个即可）
 */
export const perm: Directive = {
    mounted(el: HTMLElement, binding: DirectiveBinding) {
        const { value } = binding;

        if (!value) {
            console.warn("[v-perm] 指令需要传入权限标识");
            return;
        }

        const permissions = usePermissionStore().permissions;

        // 将传入的权限值转换为数组
        const requiredPermissions = Array.isArray(value) ? value : [value];

        // 检查用户是否拥有所需权限（只要有其中一个即可）
        const hasPermission = requiredPermissions.some(permission =>
            permissions.includes(permission),
        );

        // 如果没有权限，则移除该元素
        if (!hasPermission && el.parentNode) {
            el.parentNode.removeChild(el);
        }
    },
};

export default perm;
